//聊天界面
import QtQuick 2.12
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.12
import QtQml 2.12
Rectangle{
    z:999999
    property string iconUrl
    width: parent.width
    height: 75
    Layout.alignment: Qt.AlignTop
    color: "#ffffff"



    Rectangle{
        height:35
        width:180
        radius:8
        border.color: "#dedcdb"
        // color:"red"
        anchors.right: btn.left
        anchors.rightMargin: 15
        anchors.verticalCenter: parent.verticalCenter

        Rectangle{
            id:serchBJRectangle
            anchors.fill: parent
            radius:8
            anchors.margins: 1
            color:"#e2e2e2"

            Image{
                anchors.left: parent.left
                anchors.leftMargin: 7
                anchors.verticalCenter: parent.verticalCenter
                height:15
                width:15
                source:"qrc:/images/sernch"

            }


            TextInput{
                id:serchText
                height:30
                width:150
                anchors.top: parent.top
                anchors.topMargin: 5
                anchors.left: parent.left
                anchors.leftMargin: 30
                color:"#000000"
                text:""
                font.pointSize: 15
                font.bold: true
                anchors.margins: 20
                focus: false
                clip: true
                selectByMouse: true //设置光标大小
                maximumLength: 23 //限制字符个数

                onFocusChanged: {
                    if(serchText.focus){
                        serchBJRectangle.color="#f9f9f9"
                        friendListViewBox.visible=false
                    }else{
                        serchBJRectangle.color="#cfcfcf"
                    }
                }
                onTextChanged: {
                console.log(serchText.text)
                }


            }


            Button {
                id:nobtn
                width:18
                height:18

                anchors.right: parent.right
                anchors.verticalCenter: parent.verticalCenter
                anchors.rightMargin: 8

                Image{
                    width:8
                    height:8
                    source:"qrc:/images/cha"
                    anchors.centerIn: parent
                }

                background: Rectangle{
                    id:nobtnRectangle
                    anchors.fill: parent
                    color:"#cfcfcf"
                    radius:8

                    MouseArea{
                        anchors.fill: parent
                        hoverEnabled: true
                        onEntered: {
                            nobtnRectangle.color="#c5c5c5"
                        }
                        onExited: {
                            nobtnRectangle.color="#cfcfcf"
                        }
                        onClicked: {
                            // mindStatusLoader.source="NewUserListPage.qml"
                            nobtnRectangle.color="#cfcfcf"
                            serchText.focus=false
                               friendListViewBox.visible=true
                        }
                    }
                }
            }
        }
    }

    Button{
        id:btn
        anchors.verticalCenter: parent.verticalCenter
        anchors.right: parent.right
        anchors.rightMargin: 7

        width: 30
        height:30

        background: Rectangle{
            id:btnRectangle
            anchors.fill: parent

            color:"#e2e2e2"
            radius: 8
            MouseArea{
                anchors.fill: parent;
                hoverEnabled: true;
                onEntered: {    //鼠标移入
                    btn.icon.color = "#1a1a1a"
                    //背景色
                    btnRectangle.color ="#d1d1d1";
                }
                onExited: {
                    //移出icon颜色
                    btn.icon.color = "#585858"
                    //移出背景色
                    btnRectangle.color = "#e2e2e2"

                }
            }
        }
        icon{
            source:iconUrl
            width:25
            height:25
            color:"#585858"
        }
    }
      }


